<!-- From Uiverse.io by SmookyDev  - Tags: glassmorphism, flashy, animation, form, hover, login form, tailwind -->
<div
  class="form w-[300px] rounded-md shadow-xl overflow-hidden z-[100] relative cursor-pointer snap-start shrink-0 py-5 px-6 bg-[#DFA16A] r flex flex-col items-center justify-center gap-3 transition-all duration-300"
>
  <p
    class="text-[#A15A3E] translate-x-[46%] -rotate-90 tracking-[20px] transition-all hover:translate-x-[50%] -translate-y-1/2 font-semibold text-2xl absolute right-0"
  >
    Welcome
  </p>

  <div class="capitalize">
    <p class="text-2xl text-[#7F3D27] pb-5">Create Your Account</p>
    <form action="" class="flex flex-col gap-3">
      <div class="flex flex-col items-start w-full">
        <label for="name" class="text-sm text-[#7F3D27] font-semibold"
          >Name</label
        >
        <input
          type="text"
          placeholder="Enter Your Name"
          class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs"
        />
      </div>

      <div class="flex flex-col items-start w-full">
        <label for="email" class="text-sm text-[#7F3D27] font-semibold"
          >Email</label
        >
        <input
          type="email"
          placeholder="Enter Your Email"
          class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs"
        />
      </div>

      <div class="flex flex-col items-start w-full">
        <label for="password" class="text-sm text-[#7F3D27] font-semibold"
          >Password</label
        >
        <input
          type="password"
          placeholder="Enter Your Password"
          class="w-full py-px pl-0 bg-transparent outline-none focus:ring-0 border-0 border-b-2 border-[#7F3D27] placeholder:text-[#A15A3E] focus:outline-none text-[#7F3D27] placeholder:text-xs"
        />
      </div>

      <div class="inline-flex gap-2 items-center text-[#A15A3E]">
        <input
          type="checkbox"
          name=""
          id=""
          class="w-3 h-3 focus:border-0 focus:outline-none focus:accent-[#7F3D27] checked:accent-[#A15A3E] checked:text-[#A15A3E] px-1 py-1"
          checked=""
        />
        <p class="text-xs">
          By Signing Agree with
          <span class="font-semibold">Term &amp; Policy</span>
        </p>
      </div>

      <div class="inline-flex gap-5">
        <button
          class="px-6 focus:outline-none focus:scale-110 font-semibold text-xs py-2 rounded-[5px] hover:scale-110 transition-all hover:transiton text-[#D9D9D9] bg-[#7F3D27] shadow-[#7F3D27] shadow-lg"
        >
          Sign Up
        </button>
        <button
          class="px-6 focus:outline-none focus:scale-110 font-semibold text-xs py-2 rounded-[5px] hover:scale-110 transition-all hover:transiton text-[#7F3D27] bg-[#D9D9D9] shadow-[#7F3D27] shadow-lg"
        >
          Sign In
        </button>
      </div>
    </form>
  </div>
</div>


    